<template>
	<div class="top" :class="upActive && 'arrow-up'" @click="goto('#top')">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><path d="M256 48C141.13 48 48 141.13 48 256s93.13 208 208 208s208-93.13 208-208S370.87 48 256 48zm91.36 212.65a16 16 0 0 1-22.63.09L272 208.42V342a16 16 0 0 1-32 0V208.42l-52.73 52.32A16 16 0 1 1 164.73 238l80-79.39a16 16 0 0 1 22.54 0l80 79.39a16 16 0 0 1 .09 22.65z" fill="#fdfdfd"></path></svg>
	</div>
</template>

<script setup>
import { useGoToElement } from '@/hooks/index.js';
const gotoElement = useGoToElement();
function goto(href) {
    gotoElement(href);
}
function throttle(fn, wait = 100) {
  let flag = false;
  return function () {
    if (flag) return;
    flag = true;
    fn.call(this, arguments);
    setTimeout(() => {
      flag = false;
    }, wait);
  }
}
const upActive = ref('');
onMounted(() => {
	window.addEventListener('scroll',()=>{
      throttle(()=>{
        const top = document.documentElement.scrollTop || window.scrollY;
        upActive.value = top > 800 ? 'arrow-up' : ''; // 只给回到顶部加class
      })();
    }, false)
})
</script>

<style scoped lang="scss">
.top {
    position: fixed;
    right: 15%;
    bottom: 120px;
    width: 50px;
    height: 50px;
    transform: scale(0);
    transition: all .25s;
    opacity: 0;
    cursor: pointer;
    @include respondTo(['phone','pad']) {
      right: 5%;
    }
  &.arrow-up {
    opacity: 1;
    transform: scale(1);
  }
}
</style>
